<template>
      <div class="container">
        <div class="banner">
          <div class="search_box">
            <input class="search" type="text" placeholder="输入小区或商圈名开始找房喽！" @click="gotosearch">
            <img class="searchImg" src="../assets/image/index/seach.jpg" alt="">
          </div>
        </div>
        <nav>
          <a href="javascript:;">
            <div class="pic">
              <img src="../assets/image/index/index_03.png" alt="">
            </div>
            <span>二手房</span>
          </a>
          <a href="javascript:;">
            <div class="pic">
              <img src="../assets/image/index/index_05.png" alt="">
            </div>
            <span>新房</span>
          </a>
          <a href="javascript:;">
            <div class="pic">
              <img src="../assets/image/index/index_07.png" alt="">
            </div>
            <span>租房</span>
          </a>
          <a href="javascript:;">
            <div class="pic">
              <img src="../assets/image/index/index_09.png" alt="">
            </div>
            <span>卖房</span>
          </a>
        </nav>
        <div class="banner1">

        </div>
        <div class="hot_house">
          <div class="title">
            <h4>热门房源</h4>
            <p>Hot house</p>
          </div>
          <div class="details">
            <ul>
              <li><a href="javascript:;">
                  <div class="pic">
                    <img src="../assets/image/index/img1.jpg" alt="">
                  </div>
                  <div class="txt">
                    <h5>文化部中间层 一层带猫窝</h5>
                    <div class="info">
                      <p>2室1厅96m²南北</p>
                      <span>1105万</span>
                    </div>
                    <div class="address">
                      <p>红庙北里</p>
                      <span>14268元/平</span>
                    </div>
                    <div class="tag">
                      <span>学区房</span>
                      <span>独家</span>
                    </div>
                  </div>
                </a></li>
              <li><a href="javascript:;">
                  <div class="pic">
                    <img src="../assets/image/index/img2.png" alt="">
                  </div>
                  <div class="txt">
                    <h5>光大水墨 精装复式两层公寓</h5>
                    <div class="info">
                      <p>2室1厅96m²南北</p>
                      <span>280万</span>
                    </div>
                    <div class="address">
                      <p>光大水墨 </p>
                      <span>14268元/平</span>
                    </div>
                    <div class="tag">
                      <span>学区房</span>
                      <span>独家</span>
                    </div>
                  </div>
                </a></li>
              <li><a href="javascript:;">
                  <div class="pic">
                    <img src="../assets/image/index/img3.png" alt="">
                  </div>
                  <div class="txt">
                    <h5>南北通透两居室 精装修带厨房</h5>
                    <div class="info">
                      <p>2室1厅96m²南北</p>
                      <span>320万</span>
                    </div>
                    <div class="address">
                      <p>北京新天地</p>
                      <span>14268元/平</span>
                    </div>
                    <div class="tag">
                      <span>地铁房</span>
                      <span>独家</span>
                    </div>
                  </div>
                </a></li>
            </ul>
          </div>
        </div>
        <div class="hot">
          <div class="title">
            <ul>
              <li class="current">热门关注</li>
              <li>友情链接</li>
            </ul>
          </div>
          <div class="txt">
            <ul>
              <li>北京二手房</li>
              <li>北京找房无忧</li>
              <li>北京二手房价</li>
              <li>青年家园</li>
              <li>海淀日租房</li>
              <li>免税房源</li>
              <li>朝阳新房</li>
              <li>满五年唯一免税</li>
            </ul>
          </div>
        </div>
      </div>
</template>

<script>
export default {
  methods: {
    gotosearch () {
      this.$router.push('/search')
    }
  }
}
</script>

<style lang="less" scoped>
@color: #ff8a00;
@color1: #2f3130;
@vw: 3.20vw;
html {
  background-color: rgb(245, 245, 245);
}

.container {

  // padding-bottom: (155/@vw);
  .banner {
    position: relative;
    width: 100%;
    height: (224/@vw);
    background-image: url(../assets/image/index/banner.png);
    background-repeat: no-repeat;
    background-size: contain;

    .search_box {
      width: (288/@vw);
      height: (33/@vw);
      position: absolute;
      left: 50%;
      bottom: (8/@vw);
      transform: translateX(-50%);

      .search {
        width: (288/@vw);
        height: (33/@vw);
        border: 2px solid rgb(33, 33, 33);
        border-radius: (5/@vw);
        box-shadow: 2px 2px 2px 1px rgba(33, 33, 33, 0.4);

        &::placeholder {
          padding-left: (35/@vw);
        }
      }

      .searchImg {
        position: absolute;
        top: (9/@vw);
        left: (9/@vw);
        width: (14/@vw);
        height: (14/@vw);
      }
    }
  }

  nav {
    height: (110/@vw);
    background-color: @color;
    display: flex;
    justify-content: space-around;
    align-items: center;

    a {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: (54/@vw);
      height: (74/@vw);

      .pic {
        height: (54/@vw);
      }

      span {
        color: white;
        font-size: (12/@vw);
      }
    }
  }

  .banner1 {
    width: 100%;
    height: (250/@vw);
    background-image: url(../assets/image/index/banner2.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: (10/@vw);
  }

  .hot_house {
    margin-top: (10/@vw);

    .title {
      height: (60/@vw);
      background-color: @color;
      padding: (14/@vw) 0px 0px (20/@vw);

      h4 {
        font-size: (16/@vw);
        color: white;
      }

      p {
        font-size: (12/@vw);
        color: white;
      }
    }

    .details {
      background-color: #fff;

      ul {
        li {
          height: (142/@vw);
          padding: 0px (20/@vw);

          a {
            width: inherit;
            height: inherit;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid red;

            .pic {
              width: (81/@vw);
              height: (81/@vw);
            }

            .txt {
              width: (186/@vw);

              h5 {
                font-size: (16/@vw);
                // 文字溢出用省略号显示
                text-overflow: ellipsis;
                // 溢出隐藏
                overflow: hidden;
                // 文字在一行显示，不能换行
                white-space: nowrap;
                margin-bottom: (5/@vw);
              }

              .info {
                display: flex;
                justify-content: space-between;
                font-size: (12/@vw);
                margin-bottom: (8/@vw);

                p {
                  color: black;
                }

                span {
                  color: rgb(255, 138, 0);
                }
              }

              .address {
                display: flex;
                justify-content: space-between;
                font-size: (12/@vw);
                color: rgb(153, 166, 196);
                margin-bottom: (5/@vw);
              }

              .tag {
                span {
                  display: inline-block;
                  width: (42/@vw);
                  height: (20/@vw);
                  background-color: rgb(244, 247, 249);
                  text-align: center;
                  line-height: (20/@vw);
                  font-size: (12/@vw);
                  color: rgb(153, 166, 196);
                }
              }
            }
          }
        }

        :last-child {
          a {
            border-bottom: none;
          }
        }
      }
    }
  }

  .hot {
    margin-top: (6/@vw);
    border-top: rgb(229, 229, 229);
    background-color: #fff;

    .title {
      height: (56/@vw);
      border-bottom: (1/@vw) solid rgb(255, 138, 0);

      ul {
        display: flex;

        li {
          // height: (55/@vw);
          flex: 1;
          font-size: (16/@vw);
          color: rgb(102, 102, 102);
          text-align: center;
          line-height: (56/@vw);

          &.current {
            color: rgb(255, 188, 82);
            border-bottom: (2/@vw) solid rgb(255, 138, 0);
          }
        }
      }
    }

    .txt {
      padding: (10/@vw) 0;
      background-color: #fff;

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          padding-left: (20/@vw);
          width: 50%;
          font-size: (12/@vw);
          color: rgb(102, 102, 102);
          line-height: (28/@vw);
        }
      }
    }
  }

}
</style>
